<template>
	<view class="page" :style="'height:' + height + 'rpx'">
		<view class="noDataTip" v-if="list.length == 0">
			<view class="iconfont icon-wuanpai" style="color:#6B6B6B;margin-right: 25rpx;font-size: 45rpx;"></view>
			<view style="font-size: 45rpx;">暂无已关注成员!</view>
		</view>
		<view class="result" v-if="list.length != 0">
			<button class="manage" @click="manage()">管理</button>
		</view>
		<checkbox-group class="goodsContent" @change="checkboxChange" :style="{'margin-bottom': choose ? '130rpx' : ''}">
			<label class="goodsCard" v-for="(item,index) in list" :key="index">
				<view class="checkbox" v-if="choose">
					<checkbox :value="JSON.stringify(item)" color="#23b8ff"/>
				</view>
				<miTaPersonItem :lineHeight="false" :person="item" class="goodsData"
					:style="{'width': choose ? '95%;' : '100%;'}" @toHimCourse="toHimCourse()">
				</miTaPersonItem>
			</label>
		</checkbox-group>

		<!-- 处理栏 -->
		<view class="bottom" v-if="choose">
			<button class="cancleConcern" @click="delConcern()">取消关注</button>
		</view>
	</view>

</template>

<script>
	import miTaPersonItem from "../../components/miTaPersonItem/miTaPersonItem.vue"
	export default {
		onLoad() {
			// uni.showLoading({
			//     title: '加载中'
			// });
			this.header = getApp().globalData.header;
			this.getConcernData()
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					// console.log(res.windowHeight);

					that.height = res.windowHeight * pxToRpxScale;
					// console.log(that.height)
				}
			})
		},
		data() {
			return {
				height: 0,
				header: {},
				choose: false,
				list: [],
				deleteArray: [], //删除的学号数组
				deleteParams: {
					targetNo: ''
				},
				hasAuthorityToSeeParams: { //访问他人课表的参数
					Authority: "",
					no: ""
				},
				browsingHistory: {  //添加浏览记录的参数
					no: ""
				},
			}
		},
		methods: {
			checkboxChange(e) {
				this.deleteArray = [];
				e.detail.value.forEach((item,index) => {
					this.deleteArray.push(JSON.parse(item).source.no)
				})
				// console.log(this.deleteArray)
			},
			//管理
			manage() {
				this.choose = !this.choose
			},
			async getConcernData() {
				let res = await getApp().UniRequest("/mita/authority/concern", "Get", "",
					this.header);
					// console.log(res)
				if (res.code === 20000) {
					// console.log('关注记录', res)
					let data = res.data;
					this.list = data.list;
					// console.log(this.list)
				} else if (res.message == "关注列表为空") {
					this.list = []
				}
				uni.hideLoading();
			},
			 delConcern() {
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定取消关注？',
				    success: function (res) {
				        if (res.confirm) {
				            if (that.deleteArray.length == 0) {
								uni.showToast({
								    title: '请选择成员',
									icon: 'none',
								    duration: 3000
								});
							} else {
								that.deleteArray.forEach((item,index) => {
									that.delConcernImp(item,index)
								})
								

							}
				        } else if (res.cancel) {
				            // console.log('用户点击取消');
							that.choose = false
				        }
				    }
				});
				uni.showLoading({
					title: '删除中',
					mask: true
				});

				uni.hideLoading();
			},
			async delConcernImp(no,index,callback) {
				this.deleteParams.targetNo = no
				let res = await getApp().UniRequest("/mita/authority/concern?targetNo=" + no, "DELETE", "",
					this.header);
				// console.log('删除结果',res)
				if (res.code === 20000 && (index == this.deleteArray.length - 1)) {
					this.choose = false;
					uni.showToast({
					    title: '取消成功',
						icon: 'success',
					    duration: 2000
					});
					this.getConcernData();
					// console.log('执行')
				}
			},
			
			//查看他人课表
			async toHimCourse(item) {
				if (this.choose) {
					return;
				} else {
					this.hasAuthorityToSeeParams.Authority = this.header.Authority;
					this.hasAuthorityToSeeParams.no = item.no;
					this.browsingHistory.no = item.no;
					let miTaIsHaiZhu;
					if (item.collegeId == 13 || item.collegeId == 4 || item.collegeId == 11) {
						miTaIsHaiZhu = true
					} else {
						miTaIsHaiZhu = false
					}
					let res = await getApp().UniRequest("/mita/authority/hasAuthorityToSee", "Get", this.hasAuthorityToSeeParams,
						this.header);
					// console.log(res)
					if (res.code === 20008) {
						uni.showToast({
						    title: '对方设置权限，无法访问',
							icon: 'none',
						    duration: 3000
						});
					}
					if (res.code === 20000) {
						// console.log('111');
						let data = await getApp().UniRequest("/mita/authority/browsingHistory", "PUT", this.browsingHistory,
							this.header);
						if (data.code === 20000) {
							// console.log('添加浏览记录成功');
						} else {
							// console.log('添加浏览记录失败')
						}
						uni.navigateTo({
							url: '../miTaCourse/miTaCourse?Authority=' + res.data.Authority +
								'&miTaIsHaiZhu=' + miTaIsHaiZhu + '&name=' + item.name
						});
					}
				}
			},
		},
		components: {
			miTaPersonItem
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		padding: 10rpx;
		background-color: #f2f2f2;

		button {
			background-color: #fff;
			border: 0rpx;
			padding-right: 10rpx;
			padding-left: 10rpx;
		}

		.noDataTip {
			height: 150rpx;
			width: 650rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			margin-top: -150rpx;
			left: 50%;
			margin-left: -325rpx;
			font-size: 50rpx;
			color: #6B6B6B;
			// background-color: #fff;
			// box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
			border-radius: 20rpx;
		}

		.result {
			height: 80rpx;
			position: relative;

			.manage {
				position: absolute;
				padding-left: 20rpx;
				padding-right: 20rpx;
				top: 20rpx;
				right: 30rpx;
				height: 70rpx;
				font-size: 30rpx;
				background-color: #23b8ff;
				color: #FFFFFF;
				font-weight: 700;
				line-height: 70rpx;
				letter-spacing: 3rpx;
			}
		}

		.goodsContent {
			background-color: #f2f2f2;
			.goodsCard {
				display: flex;
				position: relative;

				.checkbox {
					width: 5%;
					text-align: center;
					line-height: 220rpx;
				}

				.goodsData {
					width: 95%;
					height: 100%;
					display: flex;
					border-radius: 20rpx;
				}
			}
		}

		.bottom {
			height: 120rpx;
			width: 100%;
			margin: auto;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			text-align: center;
			font-size: 32rpx;

			//
			.cancleConcern {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -40rpx;
				margin-left: -100rpx;
				color: #fff;
				height: 80rpx;
				width: 200rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 700;
				line-height: 80rpx;
				background-color: #23b8ff;
			}
		}
	}
</style>
